<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>ajax的优点：可以局部刷新页面，只刷新需要刷新的地方，节省性能也节省数据</p>
    <p>提交表单：刷新整个页面，效率低</p>
    <button onclick="getData()">发请求</button>

    <script>
        function getData () {
            // http://localhost:3000/play/hot
            // 1. 创建对象
            // 2. 连接到服务器
            // 3. 发送请求
            // 4. 接受服务器返回的数据
            var myAjax = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
            // ActiveXObject('Microsoft.XMLHTTP') 用于ie5和ie6浏览器
            // 三个参数 第一个是请求方式，第二个是地址，第三个表明是否异步（默认true）
            myAjax.open('get', 'http://localhost:3000/play/hot', true);
            myAjax.send();
            myAjax.onreadystatechange = function() {
                if(myAjax.readyState==4 && myAjax.status==200) {
                    // 成功
                    // console.log(myAjax.responseText); // 原始数据字符串格式
                    console.log(JSON.parse(myAjax.responseText)); // parse 变回数组或者对象的格式
                    var resList = JSON.parse(myAjax.responseText);
                    // =================
                    // 渲染页面
                    // 显示数组的第一项的第一张图片
                    var img = document.createElement('img');
                    img.src = resList[0][0].img;
                    document.body.appendChild(img)
                }else {
                    // 失败
                    // alert('失败')
                }
            }
        }

        // window.onload  
    </script>
</body>
</html>